<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="formSearch" :model="formSearch">
            <el-form-item label="姓名：">
              <el-input
                style="width: 200px"
                v-model="formSearch.name"
                placeholder="请输入"
                class="handle-input mr10"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="formSearch" :model="formSearch">
            <el-form-item label="机构：">
              <el-select
                v-model="formSearch.orgID"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in OrganizationList"
                  :key="item.机构名称"
                  :label="item.机构名称"
                  :value="item.机构名称"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="formSearch" :model="formSearch">
            <el-form-item label="类型：">
              <el-select
                v-model="formSearch.type"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  v-for="item in userTypeList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form style="float: left">
            <el-button size="mini" type="primary" @click="personQuery"
              >查 询</el-button
            >
            <el-button size="mini" type="success" @click="showAddDialog"
              >新 增</el-button
            >
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      highlight-current-row
    >
      <el-table-column
        prop="姓名"
        label="姓名"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="人员类型"
        label="人员类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="所属机构"
        label="所属机构"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="联系方式"
        label="联系方式"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="密码"
        label="密码"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="验证码"
        label="验证码"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="showUpdateDialog(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            style="color: #ff0000; margin-left: 35px"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <!-- 弹出框 -->
    <el-dialog
      :title="formDialog.title"
      :visible.sync="formDialog.show"
      width="40%"
    >
      <el-form
        ref="formDialog"
        :model="formDialog"
        label-width="100px"
        class="flex"
      >
        <!-- 姓名,联系电话,密码,机构编号,机构名称,楼宇名称,类型 -->
        <el-form-item label="姓名：">
          <el-input
            style="width: 200px"
            v-model="formDialog.RealName"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话：">
          <el-input
            style="width: 200px"
            v-model="formDialog.MobilePhone"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input
            style="width: 200px"
            v-model="formDialog.UserPassword"
            placeholder="请输入"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="机构：">
          <el-select
            v-model="formDialog.OrgID"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in OrganizationList"
              :key="item.OrgID"
              :label="item.机构名称"
              :value="item.OrgID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型：">
          <el-select
            v-model="formDialog.UserType"
            placeholder="请选择"
            style="width: 200px"
          >
            <el-option
              v-for="item in userTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="formDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
// import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      formDialog: {},
      formSearch: {
        name: '',
        orgID: '全部',
        type: '全部',
      },
      OrganizationList: [],
      tableData: [],
      originalData: [],
      userTypeList: [{ "label": "全部", "value": "全部" }, { "label": "用户", "value": "0" }, { "label": "物业人员", "value": "1" }]
    }
  },
  mounted () {
    this.getBuildingList()
    this.getData()
  },
  methods: {
    // 获取 楼宇
    async getBuildingList () {
      var url = 'System/GetOrganizationInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.OrganizationList = data
      this.OrganizationList.unshift({ "OrgID": "全部", "机构名称": "全部" })
    },
    // 获取 人员
    async getData () {
      var url = 'System/GetUserInfo?UserID=' + localStorage.getItem('UserID')
      const { data } = await this.$Http.get(url)
      this.originalData = data
      console.log(data)
      // this.originalData = [{"VID":535,"WORKDATE":"2021-06-16","AM_IN":"06:28:50","AM_OUT":"11:00:49","PM_IN":"13:20:57","PM_OUT":"22:03:01","APOINT":40,"WORKCOUNT":"7.5","CPOINT":30,"WORKTIME":"224","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"刘广梅","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":541,"WORKDATE":"2021-06-16","AM_IN":"04:56:33","AM_OUT":"11:01:22","PM_IN":"13:25:36","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"19.1","CPOINT":30,"WORKTIME":"370","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"孟广珍","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null},{"VID":552,"WORKDATE":"2021-06-16","AM_IN":"04:46:50","AM_OUT":"11:04:35","PM_IN":"13:24:25","PM_OUT":"17:31:09","APOINT":40,"WORKCOUNT":"24.2","CPOINT":30,"WORKTIME":"456","TPOINT":30,"STAYALARM":0,"OUTALARM":0,"ALARMPOINT":0,"POINT":100,"NAME":"郭天利 ","CLIENT_NAME":"张贵庄班组","df":0.0,"LONGITUDE":0.0,"LATITUDE":0.0,"DIRECTION":null}]
      this.personQuery()
    },
    // 模糊查询
    personQuery () {
      this.currentPage = 1;
      this.tableData = this.originalData
      // const { name, client } = this.person
      if (this.formSearch.name) this.tableData = this.tableData.filter(item => item.姓名.includes(this.formSearch.name))
      if (this.formSearch.orgID != '全部') this.tableData = this.tableData.filter(item => item.所属机构 === this.formSearch.orgID)
      if (this.formSearch.type != '全部') this.tableData = this.tableData.filter(item => item.人员类型 === this.formSearch.type)
    },
    // 组织机构 新增
    handleSubmit () {
      if (this.formDialog.title.includes('新增')) {
        this.addData();
      } else {
        this.updateData();
      }
    },
    updateData () {
      var arrOrganization = this.OrganizationList.filter(item => this.formDialog.OrgID === item.OrgID)
      this.formDialog.OrgName = arrOrganization[0].机构名称
      // this.formDialog.UserID = localStorage.getItem('DepartmentName')
      console.log(this.formDialog)
      this.$axios({
        url: 'System/UpdateUserInfo',
        method: 'post',
        data: this.formDialog
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('编辑成功')
          this.formDialog.show = false;
          this.getData()
        } else {
          this.$message.error('编辑失败' + '，' + res.data.Message);
        }
      })
    },
    addData () {
      var arrOrganization = this.OrganizationList.filter(item => this.formDialog.OrgID === item.OrgID)
      this.formDialog.OrgName = arrOrganization[0].机构名称
      this.formDialog.DepartmentName = localStorage.getItem('DepartmentName')
      // console.log(this.formDialog)
      this.$axios({
        url: 'System/AddUserInfo',
        method: 'post',
        data: this.formDialog
      }).then(res => {
        console.log(res)
        if (res.data.IsSucess) {
          this.$message.success('新增成功')
          this.formDialog.show = false;
          this.getData()
        } else {
          this.$message.error('新增失败' + '，' + res.data.Message);
        }
      })
    },
    // 打开新增窗口
    showAddDialog () {
      //清空编辑框
      this.formDialog = {
        title: '新增人员',
        show: true,
        // RealName,MobilePhone,UserPassword,OrgID,OrgName,DepartmentName,UserType
        RealName: '',
        MobilePhone: '',
        UserPassword: '',
        OrgID: '',
        OrgName: '',
        DepartmentName: '',
        UserType: '',
      }
    },
    // 打开新增窗口
    showUpdateDialog (index, row) {
      var userData = Object.assign({}, row);
      var arrOrganization = this.OrganizationList.filter(item => userData.所属机构 === item.机构名称)
      var uType = '0'
      if (userData.人员类型 === '物业人员') {
        uType = '1'
      }
      this.formDialog = {
        title: '编辑人员',
        show: true,
        RealName: userData.姓名,
        MobilePhone: userData.联系方式,
        UserPassword: userData.密码,
        OrgID: arrOrganization[0].OrgID,
        OrgName: userData.所属机构,
        UserType: uType,
        UserID: userData.UserID,
      }
    },
    // 删除
    async handleDelete (index, row) {
      var url = 'System/DeleteUserInfo?UserID=' + row.UserID
      const { data } = await this.$Http.get(url)
      if (data.IsSucess) {
        this.$message.success('删除成功')
        this.getData()
      } else {
        this.$message.error('删除失败');
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
    },
    handleSizeChange (size) {
      this.pageSize = size;
      // console.log(this.pageSize)
    }
  }
}
</script>
<style>
</style>